<template>
  <el-card style="width: 90%">
    <template #header>
      <div class="card-header">
        <span>用户管理</span>
      </div>
    </template>

    <el-table :data="tableData" style="width: 100%">
      <!-- 表格列定义保持不变 -->
      <el-table-column type="index" label="序号" align="center" width="100" />
      <el-table-column prop="username" align="center" label="姓名" width="180" />
      <el-table-column prop="nickname" align="center" label="昵称" width="180" />
      <el-table-column prop="email" align="center" label="邮箱" width="180" />
      <el-table-column prop="user_pic" align="center" label="头像" width="180" />
      <el-table-column prop="authority" align="center" label="权限" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.authority == 0" type="success">管理员</el-tag>
          <el-tag v-if="scope.row.authority == 1" type="info">普通用户</el-tag>
          <el-tag v-if="scope.row.authority == 2" type="primary">超级管理员</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300px">
        <template #default="scope">
          <el-button type="text" size="small" @click="deleteAuthor(scope.row.id)">删除作者</el-button>
          <el-button type="text" size="small" @click="AssignPermissions(scope.row.id)" v-if="scope.row.authority == 1">设为管理</el-button>
          <el-button type="text" size="small" @click="ChangeUser(scope.row.id)" v-if="scope.row.authority == 0">降为用户</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增分页条组件 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 10, 15]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      style="margin-top: 20px; display: flex; justify-content: flex-end"
    />
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { authorListService,authorStatusService,authorCancelService,authorDeleteService } from '@/api/manager';
import { ElMessage,ElMessageBox } from 'element-plus';

// 分页相关响应式变量
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示条数
const total = ref(0); // 总记录数
const tableData = ref([]); // 表格数据

// 初始化获取数据（带分页参数）
onMounted(() => {
  fetchData();
});

// 获取数据的函数（支持分页）
const fetchData = async () => {
  try {
    const response = await authorListService({
      pageNum: currentPage.value,
      pageSize: pageSize.value
    });
    
    tableData.value = response.data.items || []; // 假设接口返回的列表字段为 records
    total.value = response.data.total || 0; // 假设接口返回的总记录数字段为 total
  } catch (error) {
    console.error('获取用户列表失败:', error);
  }
};

// 处理每页显示条数变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1; // 切换条数后重置为第一页
  fetchData();
};

// 处理页码变化
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
  fetchData();
};

// 设为管理
const AssignPermissions = async(userId) => {
  let result = await authorStatusService(userId);
  if (result.code === 0) {
    ElMessage({
    type: 'success',
    message: '操作成功', 
  }) 
  }
  fetchData();
};

// 降职为用户
const ChangeUser = async(userId) => {
  let result = await authorCancelService(userId); 
  if (result.code === 0) {
    ElMessage({
    type:'success',
    message: '操作成功', 
    }) 
  }else{ 
    ElMessage({
    type:'error',
    message: result.message, 
    }) 
  }
  fetchData();
}

// 删除作者
const deleteAuthor = (userId) =>{
  ElMessageBox.confirm(
    '您确认要删除该作者信息吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }
  )
    .then(async() => {
      await authorDeleteService(userId); 
      fetchData();
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>

<style scoped>
/* 可选：分页条样式调整 */
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>